<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.container{
				width: 600px;
				height:500px;
				background-color:#ccc;
				/* 水平居中 */
				margin:0 auto;
				/* 弹性盒布局 */
				display:flex;
				/* 排列方式 */
				flex-direction: row;
				/* 水平居中 */
				justify-content:center;
				/* 让子元素分散对齐 */
				/* justify-content:space-around; */
				/* 第一个元素和最后一个对齐边缘 */
				/* justify-content:space-between; */
				/* 居中 */
				/* align-items: center; */
				/* 开始位置对齐 */
				/* align-items: flex-start; */
				/* 结束位置对齐 */
				align-items: flex-end;
				
			}
			.element1{
				width:100px;
				height:100px;
				background-color: red;
				color:#fff;
				font-size: 30px;
			}
			.element2{
				width:100px;
				height:100px;
				background-color: blue;
				color:#fff;
				font-size: 30px;
			}
		</style>	
	</head>
	<body>
		<div class="container">
			<div class="element1">
				1
			</div>
			<div class="element2">
				2
			</div>
		</div>		
	</body>
</html>